<meta charset="UTF-8" />

<div id="app"></div>

<link rel="stylesheet" type="text/css" href="./style.css">

<script src="./SplitNumber.js"></script>
<script src="./Draw.js"></script>

<template id="title_template">
	y=cos(x<sup><input type="text" id="power_value_input" class="title_box_input" value="3" /></sup>)
</template>

<script>
	(() => {
		/**
			* @typedef { Object } Config
			* @property { HTMLElement } element
			* @property { string } title_template
			* @property { () => HTMLInputElement[] } other_inputs
			* @property { (value: number)=>{ x: number; y: number; } } math_calc
			* @property { boolean } math_calc_input_x
			* @property { number } x_axis_range_value
			* @property { number } y_axis_range_value
			* @property { number } draw_count_value
			*/

		/** @type { (config: Config) => void; } */
		const Draw = window.Global_Draw;

		const element = document.getElementById("app");
		const title_template = document.getElementById("title_template").innerHTML;

		Draw({
			element,
			title_template,
			x_axis_range_value: 7,
			y_axis_range_value: 4,
			draw_count_value: 25000,
			other_inputs: () => [document.getElementById("power_value_input")],
			math_calc_input_x: true,
			math_calc: (x) => {
				/** @type { HTMLInputElement } */
				const element = document.getElementById("power_value_input");
				const y = Math.cos(Math.pow(x, parseInt(element.value)));
				return { x, y };
			},
		});
	})();
</script>
